<template>
  <div>
    <div class="upload-item"
         v-for="(item,index) in uploadImgs"
         :key="index">
      <img :src="baseurl+'/'+item.url"
           :preview="preview"
           alt="">
      <span v-if="!imgList"
            @click="removeImg(item.name,index)"></span>
    </div>
    <div class="upload-item" v-if="!imgList">
      <img src="@static/images/upload.png"
           alt="">
      <input type="file"
             :name="('file'+uploadIndex)"
             @change="upload">
    </div>
  </div>
</template>
<script>
export default {
  name: "upload",
  data() {
    return {
      uploadImgs: [], // 图片上传回传的照片
      preview: "", // 预览图片分组
      // uploadImgs: [], // 图片上传回传的照片
      uploadImgFormData: null, // 图片上传formData对象
      uploadIndex: 0,
      baseurl: this.$axiosAjax.baseurl
      // images: []
    };
  },
  props: {
    imgList: {
      default: ""
    },
    images: {
      default: () => []
    },
    uploadImgss: {
      default: () => []
    }
  },
  watch: {
    uploadImgss(val) {
      debugger;
      if (val) {
        val.forEach(item => {
          this.uploadImgs.push(item);
        });
      }
    },
    created() {
    
      this.uploadImgs = this.uploadImgss;
      this.preview = new Date().getTime();
      this.imgList.forEach(item => {
        this.uploadImgs.push(item);
      });
    }
  },
  methods: {
    upload(e) {
      let This = this;
      let file = e.target.files[0];
      let param = new FormData();
      param.append("file", file);
      // 上传弹框提示
      this.$vux.loading.show({
        text: '上传中...'
      });
      This.$axiosAjax.upload(param).then(res => {
        This.uploadImgs.push({
          name: res.data.result.fileName,
          size: res.data.result.fileSize,
          url: res.data.result.fileUrl
        });
        This.$emit("setFormData", This.uploadImgs.length, This.uploadImgs);
        this.$vux.loading.hide();
      });
      // if (this.uploadImgFormData) {
      //   this.uploadImgFormData.append(e.target.name, file)
      // } else {
      //   let formData = new FormData()
      //   formData.append(e.target.name, file)
      //   this.uploadImgFormData = formData

      // }
      // if (file.type.indexOf('image') == 0) {
      //   let reader = new FileReader()
      //   let x = new Date().getTime();
      //   reader.readAsDataURL(file)
      //   reader.onload = function (e) {
      //     This.uploadImgs.unshift({
      //       url: e.target.result,
      //       name: x
      //     })
      //     This.images.unshift(file)
      //     This.$emit('setFormData', This.uploadImgFormData, This.uploadImgs.length, This.uploadImgs, This.images)
      //     This.$nextTick(() => {
      //       This.$previewRefresh()
      //     })
      //   }
      // }
      // this.uploadIndex++
    },
    removeImg(name, index) {
      this.uploadImgs.splice(index, 1);
      this.$emit("setFormData", this.uploadImgs.length, this.uploadImgs);
    }
  }
};
</script>
<style>
</style>
